<template>
	<div v-if="async">
		<el-form @submit.native.prevent v-if="!show&&formWidget.forms.length!=0">
			<el-form-item class="form_flex">
				<el-dropdown @command="handleCommand" v-show="dropItem.length>1">
					<span class="el-dropdown-link">
						{{serarchValue}}
						<i class="el-icon-arrow-down el-icon--right"></i>
					</span>
					<el-dropdown-menu slot="dropdown" :split-button="true" trigger="click">
						<el-dropdown-item :command="item.label" v-for="(item,index) in dropItem " :key="index" @click.native="dropdownItem(item)">{{item.label}}</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
				<div v-for="(item,index) in dropItem " :key="index">
					<el-input v-model="selectFormValue" @keyup.enter.native="searchHandler('search')" :placeholder="'请输入'+item.label" v-if="item.label === formConfig.label" class="form-data"></el-input>
				</div>
				<el-button type="primary" @click.native="searchHandler('search')" :loading="submitLoading" class="but_modality">搜索</el-button>
			</el-form-item>
		</el-form>
		<!-- 区分区分 -->
		<div v-if="show">
			<div class="elForm">
				<div class="el_elasticity">
					<el-form class="showHiden">
						<el-form-item v-for="(form,formIndex) in formWidget.advancedForms" :key="formIndex" :label="form.label">
							<el-input v-model="SeniorSearchModel[form.prop]" :placeholder="'请输入'+form.label" v-if="form.type==='TextBox'||form.type==='TextArea'"></el-input>
							<x-user-tree v-model="SeniorSearchModel['UserIdJson']" count="40" :isJson="true" placeholder="请选择会员" v-if="form.type==='UserTree'"></x-user-tree>
							<el-switch v-model="SeniorSearchModel[form.prop]" :placeholder="'请输入'+form.label" v-if="form.type==='Switch'"></el-switch>
							<x-select v-model="SeniorSearchModel[form.prop]" :noChoice="true" v-if="form.type==='DropdownList'||form.type==='RadioButton'" :type="form.parameter" :apiUrl="form.apiUrl" ref="XSelect"></x-select>
							<div v-if="form.type==='NumberRang'" class="number-rang">
								<el-input-number v-model="SeniorSearchModel[form.prop+'_Start']" :placeholder="'请输入起始'+form.label"></el-input-number>
								<div class="center-icon">
									<i class="el-icon-minus"></i>
								</div>
								<el-input-number v-model="SeniorSearchModel[form.prop+'_End']" :placeholder="'请输入截止'+form.label"></el-input-number>
							</div>
							<div v-if="form.type === 'ForeignKey'">
								<x-data-select ref="x_data_select" :widget="form" v-model="SeniorSearchModel[form.prop]" :type="form.parameter"></x-data-select>
							</div>
							<div v-if="form.type==='DatePicker'">
								<div class="block">
									<el-date-picker v-model="dataPicke" :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['12:00:00']" @change="timeChange(form.prop)">
									</el-date-picker>
								</div>
							</div>
						</el-form-item>
					</el-form>
					<div class="hightSearch">
						<div class="hightSearch_box">
							<el-button style="background: #1786dc;color:#ffff" @click="advanced()">高级搜索</el-button>
							<el-button plain type="success" @click="colseTab">关闭高级搜索</el-button>
							<el-button plain type="info" @click="closeSearchModel">清空内容</el-button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'searchForm',
		props: {
			tabsWdiget: {}
		},
		data() {
			return {
				async: false,
				show: false,
				serarchValue: '请输入',
				formConfig: '',
				selectFormValue: '',
				dropItem: [],
				SeniorSearchModel: {},
				dataPicke: [],
				submitLoading: false,
				formWidget: {},
				pickerOptions: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
							picker.$emit('pick', [start, end])
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
							picker.$emit('pick', [start, end])
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
							picker.$emit('pick', [start, end])
						}
					}, {
						text: '最近半年',
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 180)
							picker.$emit('pick', [start, end])
						}
					}, {
						text: '最近一年',
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 360)
							picker.$emit('pick', [start, end])
						}
					}]
				}
			}
		},
		methods: {
			init(searchOptions) {
				this.dropItem = []
				if (searchOptions !== undefined) {
					this.formWidget = searchOptions
				} else {
					this.formWidget = this.forms
				}
				if (!this.formWidget.forms) {
					return
				}
				this.formWidget.forms.forEach(formVal => {
					if (this.$ala.strIsEmpty(formVal.type)) {
						formVal.type = 'input'
					}
					if (formVal.type !== 'date') {
						this.dropItem.push(formVal)
					}
				})
				if (this.formWidget.advancedForms.length !== 0) {
					var advancedSearch = {
						label: '高级搜索',
						type: 'input'
					}
					this.dropItem.push(advancedSearch)
				}
				for (var i = 0; i < this.formWidget.forms.length; i++) {
					if (this.formWidget.forms[i].type !== 'date') {
						if (this.serarchValue === '请输入') {
							this.formConfig = this.formWidget.forms[i]
							this.serarchValue = this.formWidget.forms[i].label
						}
						break
					}
				}
				this.async = true
			},
			closeSearchModel() {
				this.dataPicke = ''
				for (var i in this.SeniorSearchModel) {
					this.SeniorSearchModel[i] = undefined
				}
				if (this.$refs.XSelect !== undefined) {
					var selectLength = this.$refs.XSelect.length
					for (var j = 0; j < selectLength; j++) {
						this.$refs.XSelect[j].viewModel = ''
					}
				}
				if (this.$refs.x_data_selec) {
					for (let k = 0; k < this.$refs.x_data_select.length; k++) {
						this.$refs.x_data_select[k].tags = []
					}
				}
			},
			timeChange(prop) {
				this.SeniorSearchModel[prop + '_Start'] = this.dataPicke[0]
				this.SeniorSearchModel[prop + '_End'] = this.dataPicke[1]
			},
			dropdownItem(item) {
				this.selectFormValue = ''
				this.formConfig = item
				if (item.label !== '高级搜索') {
					this.show = false
				}
			},
			advanced() {
				this.$emit('searchForm', this.SeniorSearchModel)
			},
			colseTab() {
				this.show = false
				this.serarchValue = this.dropItem[0].label
				this.dropdownItem(this.dropItem[0])
				this.emptyForm()
				this.closeSearchModel()
			},
			searchHandler(type) {
				this.emptyForm()
				this.submitLoading = true
				var paramenter = {
					pageIndex: 1
				}
				this.formWidget.forms.forEach(formsVal => {
					paramenter[formsVal.modelValue] = ''
				})
				paramenter = {
					...paramenter,
					...this.SeniorSearchModel
				}
				if (type === 'search') {
					for (var i in paramenter) {
						if (this.formConfig.modelValue === i) {
							paramenter[i] = this.selectFormValue
						}
					}
					this.$emit('searchForm', paramenter)
				}
				setTimeout(() => {
					this.submitLoading = false
				}, 500)
			},
			handleCommand(command) {
				if (command === '高级搜索') {
					if (this.formWidget.advancedForms.length > 0) {
						this.emptyForm()
						this.serarchValue = command
						this.show = !this.show
					} else {
						this.$confirm('高级搜索暂时无法使用', {
							confirmButtonText: '确定',
							cancelButtonText: '取消'
						}).then(() => {}).catch(() => {})
					}
				} else {
					this.serarchValue = command
				}
			},
			emptyForm() {
				var vLength = this.formWidget.advancedForms.length
				var array = {}
				for (var j = 0; j < vLength; j++) {
					if (this.formWidget.advancedForms[j].label !== '高级搜索') {
						array[this.formWidget.advancedForms[j].prop] = this.tabsWdiget[this.formWidget.advancedForms[j].prop]
					}
				}
				this.SeniorSearchModel = array
			}
		}
	}
</script>
<style rel="stylesheet/scss" lang="scss">
	@import "./style.scss";
</style>